<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <title>新闻中心</title>
    <link href="css/base.css" type="text/css" rel="stylesheet" />
    <link href="css/news.css" type="text/css" rel="stylesheet" />

</head>

<body>
    <div id="app">
        <!--顶部-->
        <div class="banner">
            <!--头部-->
            <div class="top">
                <div class="logo"></div>
                <span></span>
                <div class="txt01">
                    <p>专注护肤行业<b>10年</b></p>
                    <p>我们只生产最高品质的护肤产品</p>
                </div>
                <div class="tel">
                    <p>全国服务咨询热线</p>
                    <b>400-888-2837</b>
                </div>
            </div>
            <!--导航-->
            <div class="nav">
                <div class="nav_bg">
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><span></span><a href="product.html?series=0">产品中心</a></li>
                        <li><span></span><a href="brandIdea.html">理念</a></li>
                        <li><span></span><a href="addProduct.html">添加产品</a></li>
                        <li><span></span><a href="search.html">搜索</a></li>
                    </ul>
                    <div class="search">
                        <button class="s01" id="searchProduct" style="background-color: #077c2b; border: none; color: #fff; 
                        padding: 5px 10px; font-size: 14px; font-weight: bold;
                        box-shadow: 0 2px 4px rgba(0,0,0,.2);">产品搜索</button>
                        <input type="text" placeholder="请输入关键字" class="s02" id="searchContent" /><span></span>
                        <button id="login" onClick="logout()" style="background-color: #077c2b; border: none; color: #fff; 
                            padding: 5px 10px; font-size: 14px; font-weight: bold;
                            box-shadow: 0 2px 4px rgba(0,0,0,.2);">
                            退出账号
                        </button>
                        <button id="loginUser"
                            style="cursor: default; background-color: #077c2b; border: none; color: white; height: 25px;"><a
                                href="login.html" style="color: white;">未登录</a></button>
                    </div>
                </div>
            </div>
            <i></i>
        </div>


        <div class="main">
            <h2>当前位置：搜索</h2>
            <div class="left">
                <ul>
                    <li class="curr"><a href="#"><span></span>搜索</a></li>

                </ul>


                <div class="yin"><img src="images/yin01.png" /> </div>
            </div>


            <div class="right" id="center">
                <ul id="productList">
                    
                </ul>

                <div class="num">
                    <b><a href="javascript:" @click="prePage">上一页</a></b>
                    <span class="curr"><a href="javascript:" id="lookPage">1</a></span>
                    
                    <b><a href="javascript:" @click="nextPage">下一页</a></b>
                </div>
            </div>
        </div>


        <!--底部-->
        <div class="bottom">
            <p>© 上海化妆品化妆品有限公司版权所有 沪ICP备11049051号</p>
        </div>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/news.js"></script>
<script src="js/ajax.js"></script>
<script src="js/vue.js"></script>
<script src="./js/userIsLogin.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            search: null,
            currPage: 1,
        },
        created() {
            this.searchProduct();
        },
        methods: {
            //搜索产品
            searchProduct() {
                //先获取请求头的search
                const searchParams = new URLSearchParams(window.location.search);
                let search = searchParams.get('search');
                //如果null就传个空值，避免后端报错
                if (search == undefined) {
                    search = "";
                }
                //设置json数据
                const jsonData = {
                    search: search,
                    currPage: this.currPage - 1
                }
                //发送请求
                ajax.post("/getProductPageInfo", jsonData, (data) => {
                    console.log(data);
                    if(data.data.length==0) {
                        alert("没有数据");
                        return;
                    }
                    let htmlData = ``;
                    for (var i = 0; i < data.data.length; i++) {
                        htmlData += `
                        <li>
                        <a href="productxq.html?id=${data.data[i].id}">
                            <img src="http://127.0.0.1:5501/webItemTest01/BeautyMakeup/images/product/${data.data[i].imgSrc}" style="border:solid 6px #e0eebf;width:16vh;height:16vh;" />
                            <div class="txt">
                                ${data.data[i].productName}
                                <p>${data.data[i].introduction}
                                </p>
                            </div>
                        </a>

                    </li>
                        `;
                    }
                    $("#productList").html(htmlData);
                    $("#lookPage").html(this.currPage);
                });
            },
            //上一页
            prePage(){
                if(this.currPage==1){
                    alert("不能往前了");
                    return;
                }
                this.currPage--;
                this.searchProduct();
            },
            //下一页
            nextPage(){
                this.currPage++;
                this.searchProduct();
            }
        },
    })
</script>

</html>